<template>
        <van-row class="film-info">
            <van-col span="18">
                <span class="name">{{ film.name}} </span>
                <van-tag color="#d2d6dc" text-color="#fff">{{ film.filmType && film.filmType.name}}</van-tag>
            </van-col>
            <van-col span="6">
                <div v-if="film.grade" class="film-grade">
                    <span class="grade">{{ film.grade}}</span>
                    <span class="grade-text">分</span>
                </div>
            </van-col>
            <van-col span="24">
                {{ film.category}}
            </van-col>
            <van-col span="24">
                {{ film.premiereAt | dateFormat }}
            </van-col>
            <van-col span="24">
                {{ film.nation}}
            </van-col>
            <van-col span="24">
                {{ film.runtime}}分钟
            </van-col>
            <van-col span="24">
                <div :class="{textbox: !isOpen}">
                    {{ film.synopsis}}
                </div>
            </van-col> 
            <van-col span="24">
                <p class="text-flag" @click="changeFlag">
                    <van-icon :name="isOpen ? 'arrow-up': 'arrow-down'" />
                </p>
            </van-col> 
        </van-row>
</template>

<script>
import dayjs from 'dayjs'
export default {
    props: ['film'],
    data(){
        return {
            isOpen: false
        }
    },
    filters:{
        dateFormat(date){
            return dayjs(date * 1000).format('YYYY-MM-DD上映')
           
        }
    },
    methods: {
        changeFlag(){
            this.isOpen = !this.isOpen
        }
    }
}
</script>

<style scoped>
.film-info {
    background: #fff;
    margin-bottom: 16px;
    padding: 12px 15px 15px;
}
.film-info:nth-child(n + 2){
    font-size: 13px;
    color: #797d82;
    margin-top: 4px;
}
.film-info .name{
    color: #191a1b;
    font-size: 18px;
    height: 24px;
    line-height: 24px;
    margin-right: 7px;
}
.film-info  .film-grade {
    text-align: right;
    color: #ffb232;
    font-size: 10px;
}
.film-grade  .grade {
    font-size: 18px;
    font-style: italic;
}
.text-flag {
    width: 100%;
    text-align: center;
}
.textbox {
    height: 34px;
    overflow: hidden;
}

</style>
